<template>
  <div>
    <button @click="getData">发请求</button>
    <p>后台的数据：{{list}}</p>
    <p>使用插槽的前提：有父子组件</p>
    <!-- 使用插槽的目的：让组件的可扩展性更强 -->
    <p>
      插槽的类型： 1.匿名插槽：是一个广场，随意进出，可以显示任何内容，没有约束
      2.具名插槽：各回各家，各找各妈
      3.作用域插槽:在传递html结构的同时还可以携带数据，数据是由子组件传给父组件的，在父组件中处理后返回到子组件显示
    </p>
    <vSmall>
      <!-- 缩写 需要放在template中 -->
      <template #a148>
        <table border="1">
          <tr>
            <td>11</td>
            <td>12</td>
          </tr>
          <tr>
            <td>11</td>
            <td>12</td>
          </tr>
        </table>
      </template>
      <form slot="a151">
        <input type="text" />
        <button>click</button>
      </form>
    </vSmall>

    <!-- 以下是作用域插槽 -->
    <vSmall>
      <!-- slot-scope="info2" 通过这个代码，获取子组件的数据 -->
      <template slot-scope="info2">
        <button v-for="item in info2.info2" :key="item">{{ item }}</button>
      </template>
    </vSmall>
  </div>
</template>

<script>
import vSmall from "./Small.vue";
export default {
  data() {
    return {
      list: []
    }
  },
  components: {
    vSmall,
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 省略前缀时 就会向当前地址发请求
      this.$http("/play/hot").then((res) => {
        console.log(res);
        this.list = res[0];
      });
    },
  },
};
</script>

<style>
</style>